<template>
  <view class="combinations-container">
    <!-- 页面标题 -->
    <view class="page-header">
      <text class="page-title">风格组合管理</text>
      <button class="add-btn" @click="showAddModal">新增组合</button>
    </view>
    
    <!-- 搜索和筛选区域 -->
    <view class="search-bar">
      <view class="search-input">
        <text class="iconfont icon-search"></text>
        <input 
          type="text" 
          v-model="searchKeyword" 
          placeholder="搜索组合名称或描述" 
          @confirm="searchCombinations"
        />
      </view>
      <view class="filter-options">
        <picker 
          @change="handleFilterChange" 
          :value="filterIndex" 
          :range="filterOptions"
        >
          <view class="picker-view">
            <text>{{ filterOptions[filterIndex] }}</text>
            <text class="iconfont icon-down"></text>
          </view>
        </picker>
      </view>
    </view>
    
    <!-- 组合列表 -->
    <scroll-view 
      scroll-y 
      class="combinations-list"
      @scrolltolower="loadMoreCombinations"
      refresher-enabled
      :refresher-triggered="isRefreshing"
      @refresherrefresh="refreshCombinations"
    >
      <view v-if="combinations.length === 0" class="empty-state">
        <image src="/static/images/empty.png" mode="aspectFit"></image>
        <text>暂无组合数据</text>
      </view>
      
      <view 
        v-for="(item, index) in combinations" 
        :key="item.id" 
        class="combination-item"
      >
        <view class="combination-info">
          <view class="combination-header">
            <text class="combination-name">{{ item.name }}</text>
            <text class="combination-status" :class="{'status-public': item.isPublic === 1, 'status-private': item.isPublic === 0}">
              {{ item.isPublic === 1 ? '公开' : '私有' }}
            </text>
          </view>
          
          <text class="combination-desc">{{ item.description || '暂无描述' }}</text>
          
          <view class="combination-preview">
            <image 
              class="preview-image" 
              :src="item.previewImage || '/static/images/default-style.png'" 
              mode="aspectFill"
              @click="previewImage(item.previewImage)"
            ></image>
          </view>
          
          <view class="combination-stats">
            <view class="stat-item">
              <text class="iconfont icon-user"></text>
              <text>{{ item.useCount || 0 }}次使用</text>
            </view>
            <view class="stat-item">
              <text class="iconfont icon-like"></text>
              <text>{{ item.likeCount || 0 }}点赞</text>
            </view>
            <view class="stat-item">
              <text class="iconfont icon-star"></text>
              <text>{{ item.favoriteCount || 0 }}收藏</text>
            </view>
            <view class="stat-item">
              <text class="iconfont icon-time"></text>
              <text>{{ formatDate(item.createTime) }}</text>
            </view>
          </view>
        </view>
        
        <view class="combination-actions">
          <button class="action-btn edit-btn" @click="editCombination(item)">编辑</button>
          <button class="action-btn delete-btn" @click="confirmDelete(item)">删除</button>
          <button class="action-btn view-btn" @click="viewDetails(item)">详情</button>
        </view>
      </view>
      
      <!-- 加载更多提示 -->
      <view v-if="combinations.length > 0" class="loading-more">
        <text v-if="hasMore">加载中...</text>
        <text v-else>没有更多数据了</text>
      </view>
    </scroll-view>
    
    <!-- 新增/编辑组合弹窗 -->
    <view v-if="showPopup" class="custom-popup-mask">
      <view class="popup-content">
        <view class="popup-header">
          <text class="popup-title">{{ isEdit ? '编辑组合' : '新增组合' }}</text>
          <text class="close-btn" @click="closePopup">×</text>
        </view>
        
        <view class="form-item">
          <text class="form-label">组合名称</text>
          
          <input 
            type="text" 
            v-model="formData.name" 
            placeholder="请输入组合名称"
            class="form-input"
          />
        </view>
        
        <view class="form-item">
          <text class="form-label">组合描述</text>
          <textarea 
            v-model="formData.description" 
            placeholder="请输入组合描述"
            class="form-textarea"
          />
        </view>
        
        <view class="form-item">
          <text class="form-label">是否公开</text>
          <switch 
            :checked="formData.isPublic === 1" 
            @change="handlePublicChange"
            color="#FF69B4"
          />
        </view>
        
        <view class="form-item">
          <text class="form-label">预览图片</text>
          <view class="image-upload">
            <image 
              v-if="formData.previewImage" 
              :src="formData.previewImage" 
              mode="aspectFill"
              class="preview-image"
              @click="chooseImage"
            ></image>
            <view 
              v-else 
              class="upload-placeholder"
              @click="chooseImage"
            >
              <text class="iconfont icon-add"></text>
              <text>上传图片</text>
            </view>
          </view>
        </view>
        
        <view class="form-item">
          <text class="form-label">选择风格</text>
          <view class="style-selector">
            <view 
              v-for="(style, index) in selectedStyles" 
              :key="index"
              class="selected-style"
            >
              <text>{{ style.name }}</text>
              <text class="remove-style" @click="removeStyle(index)">×</text>
            </view>
            <button class="add-style-btn" @click="showStyleSelector">添加风格</button>
          </view>
        </view>
        
        <view class="form-actions">
          <button class="cancel-btn" @click="closePopup">取消</button>
          <button class="submit-btn" @click="submitForm">确定</button>
        </view>
      </view>
    </view>
    
    <!-- 风格选择弹窗 -->
    <view v-if="showStylePopup" class="custom-popup-mask">
      <view class="style-popup">
        <view class="style-popup-header">
          <text class="style-popup-title">选择风格</text>
          <text class="close-btn" @click="closeStylePopup">×</text>
        </view>
        
        <view class="style-search">
          <input 
            type="text" 
            v-model="styleSearchKeyword" 
            placeholder="搜索风格"
            class="style-search-input"
          />
        </view>
        
        <scroll-view scroll-y class="style-list">
          <view 
            v-for="(style, index) in filteredStyles" 
            :key="style.id"
            class="style-item"
            @click="selectStyle(style)"
          >
            <image 
              :src="style.previewUrl || '/static/images/default-style.png'" 
              mode="aspectFill"
              class="style-image"
            ></image>
            <view class="style-info">
              <text class="style-name">{{ style.name }}</text>
              <text class="style-desc">{{ style.description || '暂无描述' }}</text>
            </view>
            <checkbox 
              :checked="isStyleSelected(style.id)"
              color="#FF69B4"
            />
          </view>
        </scroll-view>
        
        <view class="style-popup-actions">
          <button class="style-cancel-btn" @click="closeStylePopup">取消</button>
          <button class="style-confirm-btn" @click="confirmStyles">确定</button>
        </view>
      </view>
    </view>
    
    <!-- 删除确认弹窗 -->
    <view v-if="showDeletePopup" class="custom-popup-mask">
      <view class="delete-popup-content">
        <view class="delete-popup-header">
          <text class="delete-popup-title">删除确认</text>
        </view>
        <view class="delete-popup-body">
          <text>确定要删除这个组合吗？此操作不可恢复。</text>
        </view>
        <view class="delete-popup-actions">
          <button class="delete-cancel-btn" @click="closeDeletePopup">取消</button>
          <button class="delete-confirm-btn" @click="deleteCombination">确定</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { styleApi, imageApi } from '../../utils/api';
import { formatDateTime  } from '../../utils/common';

export default {
  data() {
    return {
      // 组合列表数据
      combinations: [],
      // 分页参数
      page: 1,
      size: 10,
      total: 0,
      hasMore: true,
      
      // 搜索和筛选
      searchKeyword: '',
      filterOptions: ['全部', '公开', '私有', '热门', '最新'],
      filterIndex: 0,
      
      // 刷新状态
      isRefreshing: false,
      
      // 表单数据
      isEdit: false,
      currentCombinationId: null,
      formData: {
        name: '',
        description: '',
        isPublic: 1,
        previewImage: '',
        styleIds: []
      },
      
      // 风格选择
      allStyles: [],
      selectedStyles: [],
      tempSelectedStyles: [],
      styleSearchKeyword: '',
      
      // 删除确认
      combinationToDelete: null,
      
      // 弹窗显示状态
      showPopup: false,
      showStylePopup: false,
      showDeletePopup: false
    };
  },
  
  computed: {
    // 过滤后的风格列表
    filteredStyles() {
      if (!this.styleSearchKeyword) {
        return this.allStyles;
      }
      
      const keyword = this.styleSearchKeyword.toLowerCase();
      return this.allStyles.filter(style => 
        style.name.toLowerCase().includes(keyword) || 
        (style.description && style.description.toLowerCase().includes(keyword))
      );
    }
  },
  
  onLoad() {
    // 检查用户权限
    this.checkAdminPermission();
    // 加载组合列表
    this.loadCombinations();
    // 加载所有风格
    this.loadAllStyles();
  },
  
  methods: {
    // 检查管理员权限
    checkAdminPermission() {
      // const userInfo = uni.getStorageSync('userInfo');
      // if (!userInfo || userInfo.role !== 'admin') {
      //   uni.showToast({
      //     title: '您没有管理员权限',
      //     icon: 'none'
      //   });
        
      //   延迟跳转到首页
      //   setTimeout(() => {
      //     uni.switchTab({
      //       url: '/pages/index/index'
      //     });
      //   }, 1500);
      // }
    },
    
    // 加载组合列表
    loadCombinations() {
      uni.showLoading({
        title: '加载中...'
      });
      
      // 构建查询参数
      const params = {
        page: this.page,
        size: this.size
      };
      
      // 添加搜索关键词
      if (this.searchKeyword) {
        params.keyword = this.searchKeyword;
      }
      
      // 添加筛选条件
      if (this.filterIndex > 0) {
        switch (this.filterIndex) {
          case 1: // 公开
            params.isPublic = 1;
            break;
          case 2: // 私有
            params.isPublic = 0;
            break;
          case 3: // 热门
            params.orderBy = 'useCount';
            params.orderType = 'desc';
            break;
          case 4: // 最新
            params.orderBy = 'createTime';
            params.orderType = 'desc';
            break;
        }
      }
      
      // 调用API获取组合列表
      styleApi.getAllCombinations(params)
        .then(res => {
          uni.hideLoading();
          
          // 确保res.data存在且有效
          const responseData = res.data || {};
          
          if (this.page === 1) {
            this.combinations = responseData.list || [];
          } 
          else {
            this.combinations = [...this.combinations, ...(responseData.list || [])];
          }
          
          this.total = responseData.total || 0;
          this.hasMore = this.combinations.length < this.total;
          
          // 结束下拉刷新状态
          if (this.isRefreshing) {
            this.isRefreshing = false;
            uni.stopPullDownRefresh();
          }
        })
        .catch(err => {
          uni.hideLoading();
          console.error('获取组合列表失败', err);
          
          uni.showToast({
            title: '获取组合列表失败',
            icon: 'none'
          });
          
          // 结束下拉刷新状态
          if (this.isRefreshing) {
            this.isRefreshing = false;
            uni.stopPullDownRefresh();
          }
        });
    },
    
    // 加载更多组合
    loadMoreCombinations() {
      if (!this.hasMore) return;
      
      this.page++;
      this.loadCombinations();
    },
    
    // 刷新组合列表
    refreshCombinations() {
      this.isRefreshing = true;
      this.page = 1;
      this.loadCombinations();
    },
    
    // 搜索组合
    searchCombinations() {
      this.page = 1;
      this.loadCombinations();
    },
    
    // 处理筛选条件变化
    handleFilterChange(e) {
      this.filterIndex = e.detail.value;
      this.page = 1;
      this.loadCombinations();
    },
    
    // 加载所有风格
    loadAllStyles() {
      styleApi.getAllStyles({ page: 1, size: 100 })
        .then(res => {
          this.allStyles = res.data.list || [];
        })
        .catch(err => {
          console.error('获取风格列表失败', err);
          uni.showToast({
            title: '获取风格列表失败',
            icon: 'none'
          });
        });
    },
    
    // 显示新增组合弹窗
    showAddModal() {
      this.isEdit = false;
      this.currentCombinationId = null;
      this.formData = {
        name: '',
        description: '',
        isPublic: 1,
        previewImage: '',
        styleIds: []
      };
      this.selectedStyles = [];
      this.showPopup = true;
    },
    
    // 编辑组合
    editCombination(item) {
      this.isEdit = true;
      this.currentCombinationId = item.id;
      
      // 加载组合详情
      uni.showLoading({
        title: '加载中...'
      });
      
      styleApi.getCombinationById(item.id)
        .then(res => {
          uni.hideLoading();
          const combination = res.data;
          
          this.formData = {
            name: combination.name,
            description: combination.description,
            isPublic: combination.isPublic,
            previewImage: combination.previewImage,
            styleIds: combination.styleIds || []
          };
          
          // 加载组合详情中的风格
          return styleApi.getCombinationDetails(item.id);
        })
        .then(res => {
          const details = res.data;
          
          // 根据styleIds查找对应的风格信息
          this.selectedStyles = [];
          
          if (this.formData.styleIds && this.formData.styleIds.length > 0) {
            // 查找每个风格ID对应的风格信息
            this.formData.styleIds.forEach(styleId => {
              const style = this.allStyles.find(s => s.id === styleId);
              if (style) {
                // 查找对应的权重
                const detail = details.find(d => d.styleId === styleId);
                const weight = detail ? detail.weight : 1;
                
                this.selectedStyles.push({
                  ...style,
                  weight: weight
                });
              }
            });
          }
          
          this.showPopup = true;
        })
        .catch(err => {
          uni.hideLoading();
          console.error('获取组合详情失败', err);
          
          uni.showToast({
            title: '获取组合详情失败',
            icon: 'none'
          });
        });
    },
    
    // 关闭弹窗
    closePopup() {
      this.showPopup = false;
    },
    
    // 处理公开状态变化
    handlePublicChange(e) {
      this.formData.isPublic = e.detail.value ? 1 : 0;
    },
    
    // 选择图片
    chooseImage() {
      uni.chooseImage({
        count: 1,
        sizeType: ['compressed'],
        sourceType: ['album', 'camera'],
        success: (res) => {
          // 上传图片
          this.uploadImage(res.tempFilePaths[0]);
        }
      });
    },
    
    // 上传图片
    uploadImage(filePath) {
      uni.showLoading({
        title: '上传中...'
      });
      
      // 调用上传接口
      imageApi.uploadImage(filePath, (progress) => {
        console.log('上传进度：', progress);
      }).then(res => {
        // 解析响应数据
        const data = res;
        
        if (data.code === 200) {
          this.formData.previewImage = data.data.imageUrl;
        } else {
          uni.showToast({
            title: '上传失败: ' + data.message,
            icon: 'none'
          });
        }
      }).catch(err => {
        console.error('上传失败', err);
        
        uni.showToast({
          title: '上传失败，请重试',
          icon: 'none'
        });
      }).finally(() => {
        uni.hideLoading();
      });
    },
    
    // 显示风格选择器
    showStyleSelector() {
      this.tempSelectedStyles = [...this.selectedStyles];
      this.styleSearchKeyword = '';
      this.showStylePopup = true;
    },
    
    // 关闭风格选择器
    closeStylePopup() {
      this.showStylePopup = false;
    },
    
    // 判断风格是否已选择
    isStyleSelected(styleId) {
      return this.tempSelectedStyles.some(style => style.id === styleId);
    },
    
    // 选择/取消选择风格
    selectStyle(style) {
      const index = this.tempSelectedStyles.findIndex(s => s.id === style.id);
      
      if (index >= 0) {
        // 已选择，取消选择
        this.tempSelectedStyles.splice(index, 1);
      } else {
        // 未选择，添加到选择列表
        this.tempSelectedStyles.push({
          ...style,
          weight: 1 // 默认权重为1
        });
      }
    },
    
    // 确认选择的风格
    confirmStyles() {
      this.selectedStyles = [...this.tempSelectedStyles];
      this.formData.styleIds = this.selectedStyles.map(style => style.id);
      this.closeStylePopup();
    },
    
    // 移除已选择的风格
    removeStyle(index) {
      this.selectedStyles.splice(index, 1);
      this.formData.styleIds = this.selectedStyles.map(style => style.id);
    },
    
    // 提交表单
    submitForm() {
      // 表单验证
      if (!this.formData.name) {
        uni.showToast({
          title: '请输入组合名称',
          icon: 'none'
        });
        return;
      }
      
      if (!this.formData.previewImage) {
        uni.showToast({
          title: '请上传预览图片',
          icon: 'none'
        });
        return;
      }
      
      if (this.selectedStyles.length === 0) {
        uni.showToast({
          title: '请至少选择一个风格',
          icon: 'none'
        });
        return;
      }
      
      // 准备提交数据
      const combinationData = {
        name: this.formData.name,
        description: this.formData.description,
        isPublic: this.formData.isPublic,
        previewImage: this.formData.previewImage,
        coverImage: this.formData.previewImage
      };
      
      // 准备组合详情数据
      const details = this.selectedStyles.map((style, index) => ({
        styleId: style.id,
        weight: style.weight || 1,
        displayOrder: index + 1
      }));
      
      uni.showLoading({
        title: '保存中...'
      });
      
      // 根据是否编辑模式调用不同的API
      const apiPromise = this.isEdit
        ? styleApi.updateCombination({ id: this.currentCombinationId, ...combinationData }, details)
        : styleApi.createCombination(combinationData, details);
      
      apiPromise
        .then(res => {
          uni.hideLoading();
          
          uni.showToast({
            title: this.isEdit ? '编辑成功' : '创建成功',
            icon: 'success'
          });
          
          this.closePopup();
          this.refreshCombinations();
        })
        .catch(err => {
          uni.hideLoading();
          console.error(this.isEdit ? '编辑失败' : '创建失败', err);
          
          uni.showToast({
            title: (this.isEdit ? '编辑失败: ' : '创建失败: ') + (err.message || '未知错误'),
            icon: 'none'
          });
        });
    },
    
    // 确认删除
    confirmDelete(item) {
      this.combinationToDelete = item;
      this.showDeletePopup = true;
    },
    
    // 关闭删除确认弹窗
    closeDeletePopup() {
      this.showDeletePopup = false;
      this.combinationToDelete = null;
    },
    
    // 删除组合
    deleteCombination() {
      if (!this.combinationToDelete) return;
      
      uni.showLoading({
        title: '删除中...'
      });
      
      styleApi.deleteCombination(this.combinationToDelete.id)
        .then(res => {
          uni.hideLoading();
          
          uni.showToast({
            title: '删除成功',
            icon: 'success'
          });
          
          this.closeDeletePopup();
          this.refreshCombinations();
        })
        .catch(err => {
          uni.hideLoading();
          console.error('删除失败', err);
          
          uni.showToast({
            title: '删除失败: ' + (err.message || '未知错误'),
            icon: 'none'
          });
        });
    },
    
    // 查看组合详情
    viewDetails(item) {
      uni.navigateTo({
        url: `/pages/style/combination?id=${item.id}`
      });
    },
    
    // 预览图片
    previewImage(url) {
      if (!url) return;
      
      uni.previewImage({
        urls: [url],
        current: url
      });
    },
    
    // 格式化日期
    formatDate(date) {
      if (!date) return '';
      return formatDateTime(date);
    },
  }
};
</script>
<style lang="scss">
.combinations-container {
  padding: 30rpx;
  background-color: #f8f8f8;
  min-height: 100vh;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30rpx;
}

.page-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.add-btn {
  background-color: #FF69B4;
  color: #fff;
  font-size: 28rpx;
  padding: 15rpx 30rpx;
  border-radius: 10rpx;
  border: none;
}

.search-bar {
  display: flex;
  margin-bottom: 30rpx;
}

.search-input {
  flex: 1;
  background-color: #fff;
  border-radius: 10rpx;
  padding: 15rpx 20rpx;
  display: flex;
  align-items: center;
  margin-right: 20rpx;
}

.search-input input {
  flex: 1;
  height: 60rpx;
  margin-left: 10rpx;
}

.filter-options {
  width: 200rpx;
}

.picker-view {
  background-color: #fff;
  border-radius: 10rpx;
  padding: 15rpx 20rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60rpx;
}
.combinations-list {
  height: calc(100vh - 200rpx);
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 0;
}

.empty-state image {
  width: 200rpx;
  height: 200rpx;
  margin-bottom: 20rpx;
}

.empty-state text {
  color: #999;
  font-size: 28rpx;
}

.combination-item {
  background-color: #fff;
  border-radius: 15rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.combination-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15rpx;
}

.combination-name {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.combination-status {
  font-size: 24rpx;
  padding: 5rpx 15rpx;
  border-radius: 20rpx;
}

.status-public {
  background-color: #e6f7ff;
  color: #1890ff;
}

.status-private {
  background-color: #f9f0ff;
  color: #722ed1;
}

.combination-desc {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 20rpx;
  line-height: 1.5;
}

.combination-preview {
  margin-bottom: 20rpx;
}

.preview-image {
  width: 100%;
  height: 300rpx;
  border-radius: 10rpx;
}
.combination-stats {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 20rpx;
}

.stat-item {
  display: flex;
  align-items: center;
  margin-right: 30rpx;
  margin-bottom: 10rpx;
  font-size: 24rpx;
  color: #999;
}

.stat-item text:first-child {
  margin-right: 5rpx;
}

.combination-actions {
  display: flex;
  justify-content: flex-end;
  border-top: 1rpx solid #f0f0f0;
  padding-top: 20rpx;
}

.action-btn {
  margin-left: 20rpx;
  font-size: 24rpx;
  padding: 10rpx 20rpx;
  border-radius: 8rpx;
  border: none;
}

.edit-btn {
  background-color: #e6f7ff;
  color: #1890ff;
}

.delete-btn {
  background-color: #fff2f0;
  color: #ff4d4f;
}

.view-btn {
  background-color: #f6ffed;
  color: #52c41a;
}
.popup-content {
  background-color: #fff;
  border-radius: 15rpx;
  width: 650rpx;
  padding: 30rpx;
  max-height: 80vh;
  overflow-y: auto;
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30rpx;
  padding-bottom: 20rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.popup-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.close-btn {
  font-size: 40rpx;
  color: #999;
  line-height: 1;
}

.form-item {
  margin-bottom: 30rpx;
}

.form-label {
  display: block;
  font-size: 28rpx;
  color: #333;
  margin-bottom: 15rpx;
}

.form-input, .form-textarea {
  width: 100%;
  border: 1rpx solid #e8e8e8;
  border-radius: 8rpx;
  padding: 15rpx;
  font-size: 28rpx;
  box-sizing: border-box;
  height: 100rpx;
}

.form-textarea {
  height: 200rpx;
}

.image-upload {
  border: 1rpx dashed #e8e8e8;
  border-radius: 8rpx;
  overflow: hidden;
}

.upload-placeholder {
  height: 200rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #999;
  font-size: 28rpx;
}

.style-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 15rpx;
}

.selected-style {
  background-color: #f0f0f0;
  border-radius: 8rpx;
  padding: 10rpx 15rpx;
  font-size: 24rpx;
  display: flex;
  align-items: center;
}

.remove-style {
  margin-left: 10rpx;
  color: #ff4d4f;
  font-size: 28rpx;
}

.add-style-btn {
  background-color: #f9f9f9;
  border: 1rpx dashed #d9d9d9;
  color: #666;
  font-size: 24rpx;
  padding: 10rpx 20rpx;
  border-radius: 8rpx;
}
.form-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 30rpx;
  gap: 20rpx;
}

.cancel-btn, .submit-btn {
  padding: 15rpx 30rpx;
  border-radius: 8rpx;
  font-size: 28rpx;
  border: none;
}

.cancel-btn {
  background-color: #f0f0f0;
  color: #666;
}

.submit-btn {
  background-color: #FF69B4;
  color: #fff;
}

.style-popup {
  background-color: #fff;
  border-radius: 15rpx 15rpx 0 0;
  padding: 30rpx;
  max-height: 70vh;
  display: flex;
  flex-direction: column;
}

.style-popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.style-popup-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.style-search {
  margin-bottom: 20rpx;
}

.style-search-input {
  width: 100%;
  border: 1rpx solid #e8e8e8;
  border-radius: 8rpx;
  padding: 15rpx;
  font-size: 28rpx;
  box-sizing: border-box;
}

.style-list {
  flex: 1;
  overflow-y: auto;
}

.style-item {
  display: flex;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
}

.style-image {
  width: 100rpx;
  height: 100rpx;
  border-radius: 8rpx;
  margin-right: 20rpx;
}

.style-info {
  flex: 1;
}

.style-name {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 5rpx;
}

.style-desc {
  font-size: 24rpx;
  color: #999;
}

.style-popup-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 30rpx;
  gap: 20rpx;
}

.style-cancel-btn, .style-confirm-btn {
  padding: 15rpx 30rpx;
  border-radius: 8rpx;
  font-size: 28rpx;
  border: none;
}

.style-cancel-btn {
  background-color: #f0f0f0;
  color: #666;
}

.style-confirm-btn {
  background-color: #FF69B4;
  color: #fff;
}

.loading-more {
  text-align: center;
  padding: 20rpx 0;
  color: #999;
  font-size: 24rpx;
}

.custom-popup-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.delete-popup-content {
  background-color: #fff;
  border-radius: 15rpx;
  padding: 30rpx;
  width: 500rpx;
}

.delete-popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.delete-popup-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.delete-popup-body {
  margin-bottom: 30rpx;
}

.delete-popup-actions {
  display: flex;
  justify-content: flex-end;
  gap: 20rpx;
}

.delete-cancel-btn, .delete-confirm-btn {
  padding: 15rpx 30rpx;
  border-radius: 8rpx;
  font-size: 28rpx;
  border: none;
}

.delete-cancel-btn {
  background-color: #f0f0f0;
  color: #666;
}

.delete-confirm-btn {
  background-color: #FF69B4;
  color: #fff;
}
</style>